<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/4/27
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>五子棋游戏</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            display: flex;
            flex-direction: row;
        }

        .left_div {
            width: 25%;
            height: 100%;
            /*background-color: aqua;*/
            border-right: 1px solid black;
        }

        .right_div {
            width: 75%;
            height: 100%;
            /*background-color: green;*/
        }

        .top_div {
            height: 20%;
            width: 100%;
            padding: 20px;
            /*background-color: antiquewhite;*/
        }

        .bottom_div {
            height: 80%;
            width: 100%;
            /*background-color: blueviolet;*/
            border-top: 1px solid black;
        }

        .header {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }

        .top_1_div {
            display: flex;
            height: 100%;
        }

        .user_info_span {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 20px;
        }

        .bottom_div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .btn_div {
            padding: 10px;
            color: white;
            background-color: #00a2d4;
            margin-bottom: 20px;
        }
    </style>

    <!-- 引入jquery -->
    <script src="/js/jquery.min.js"></script>

</head>
<body>
<!-- 左边的div -->
<div class="left_div">

    <!-- 用户信息的div -->
    <div class="top_div">
        <div class="top_1_div">
            <!-- 默认头像 -->
            <img id="headerImg" class="header" src="/img/default_header.jpg"/>
            <span class="user_info_span">
          <!-- 昵称 -->
          超级管理员

                <!-- 退出登录 -->
          <a href="playerServlet?method=logout">退出登录</a>
        </span>
        </div>
    </div>
    <!-- 菜单的部分div -->
    <div class="bottom_div">
        <div>
            <button class="btn_div" type="button" onclick="setIframe('/back/tongjisex.jsp');">按照性别统计玩家</button>
        </div>
    </div>
</div>
<!-- 右边的div -->
<div class="right_div" style="overflow: visible;">
    <!-- 工作区的iframe -->
    <iframe id="myframe" style="width: 100%; height: 100%; border: 0px; scrolling: no;"></iframe>
</div>

<script>
    function setIframe(path){
        //获取iframe 更新src
        $("#myframe").attr("src", path);
    }
</script>
</body>
</html>
